<template>
  <el-button  @click="saveChartDesignerData">保存</el-button>
  <el-button >指标A</el-button>
  <el-button >指标B</el-button>
  <div id="jiangsuxinyi" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import {onMounted} from 'vue';
import _onupdatedatasetlist from './_onUpdateDatasetList.json'
import _onupdatedata from './_onUpdateData.json'
let designer;
//数据集
let option = { //参数配置说明 根据您的需求填写option
  uploadImage: { //上传图片相关信息 如果不传该字段时，设计器用到的所有上传图片配置项均不显示。
    server: "url",//上传图片地址
    method: "post",//上传图片请求方式
    headers: { //上传图片请求头
      "Authorization": "Token XXXXXXXX"
    },
    fieldName: "file",
    resultField: "file"
  },
  pageData: { //画布初始化时的宽高
    width: '1920px',
    height: '1080px'
  },
  dataSet: [ //数据集按钮的方式
    { //Json数据
      id: 1,
      value: "新建Json数据集"
    },
    { //http请求数据
      id: 2,
      value: "新建Http接口数据集"
    },
    { //API服务数据
      id: 3,
      value: "API服务数据集"
    },
    {
      id: 4,
      value: "外部数据集"
    },
  ]

}


//预先提供：以外部数据源的方式，动态请求来提供‘候选数据集列表’
function onUpdateDatasetList() {
  console.log("...jiangsuxinyi.vue....onUpdateDatasetList  is called")
  return new Promise((resolve, reject) => {
    resolve(_onupdatedatasetlist)
  })
}

option.onUpdateDatasetList = onUpdateDatasetList

//正常应该是和报表设计器一样，这里的x个表结构，对于报表设计器/bi设计器来说，是外部数据源的待选数据集列表
function onUpdateData(datasets, params) {
  console.log("...jiangsuxinyi.vue....onUpdateData is called,",datasets,params);
  return new Promise((resolve, reject) => {
    resolve(_onupdatedata)
  })
}
option.onUpdateData = onUpdateData
onMounted(async() => {
  designer = new XZChartDesigner("#jiangsuxinyi", option);
})
let chartDesignerReportData;
function saveChartDesignerData() {

  console.log("...jiangsuxinyi.vue....designer.getSaveData:",designer.getSaveData())
  console.log("....jiangsuxinyi.vue.....designer.getSaveData().config:",designer.getSaveData().config)
  console.log("....jiangsuxinyi.vue.....designer.getSaveData().data.dataConfig:",designer.getSaveData().dataConfig);
}

</script>

<style scoped>

</style>
